Highlights of JavaScript — Form Validation and Event Handling

To learn JavaScript, we must learn the basics.

In this article, we’ll look at the most basic parts of the JavaScript language.

Dropdown Validation

We can add validation to select dropdown fields.

For example, we can write the following HTML:

<form onSubmit="return checkForSelection();">
  <select id="fruits">
    <option value="" selected="selected">
      SELECT A FRUIT</option>
    <option value="apple">apple</option>
    <option value="orange">orange</option>
    <option value="grape">grape</option>
  </select>
  <br>
  <input type="submit" value="Submit Form">
</form>

And then add the following JavaScript:

const checkForSelection = () => {
  if (document.getElementById("fruits").selectedIndex === 0) {
    alert("Please select a fruit.");
    return false;
  }
}

We added a select element and when we click on Submit Form, the checkForSelection function is run.

We add the return keyword so that we stop the default submit behavior and let the checkForSelection run.

Radio Button Validation

Also, we can add validation to a group of radio buttons.

For instance, we can write the following HTML:

<form onSubmit="return validateRadios();">
  <input type="radio" name="r1" value="apple"> apple<br>
  <input type="radio" name="r1" value="orange"> orange<br>
  <input type="radio" name="r1" value="grape"> grape<br>
  <input type="submit" value="Submit Form">
</form>

And the following JavaScript:

const validateRadios = () => {
  const radios = document.getElementsByName("r1");
  for (const r of radios) {
    if (r.checked) {
      return true;
    }
  }
  alert("Please check one.");
  return false;
}

We have a form with a bunch of radio buttons with the same name attribute value.

They should have the same name so that they’re considered to be in the same group.

When we click the Submit Form button, the validateRadios function runs.

In the function, we get all the radio buttons by calling getElementsByName with the name attribute value of the radio buttons.

We loop through the radio buttons with the for-of loop.

Then if one is checked, we return true .

Otherwise, we show an alert and return false is none of them are checked.

Email Validation

We can validate email address in a form field by checking the format of the entered text with a regex.

For example, we can write the following HTML:

<form onSubmit="return validateEmail();">
  Please enter your email.<br>
  <input type="text" id="emailField">
  <input type="submit" value="Submit">
</form>

And write the following JavaScript code:

const validateEmail = () => {
  const emailField = document.getElementById("emailField");
  const regex = /^[\w\-\.\+]+\@[a-zA-Z0-9\. \-]+\.[a-zA-z0-9]
  if (!(regex.test(emailField.value))) {
    alert("Please correct email address");
    return false;
  }
}

We have the validateEmail function that gets the value of the input with ID emailField .

Then we call the regex.test method to check if the inputted value matches the regex format.

If it doesn’t then we show an alert and return false .

The return keyword lets us prevent the default submit behavior from running.

Handling Events

We can attach event listeners to HTML elements.

For example, we can write the following HTML:

<input type="button" value="Click" id='button1'>

And write the following JavaScript:

const b1 = document.getElementById("button1");
const sayHello = () => {
  alert('hello');
}
b1.onclick = sayHello;

We get the button with getElementById .

Then we set the onclick property to the sayHello event handler function.

The functions show an alert with the alert function.

Now when we click on the button, we show the alert.

Conclusion

We can add form validation and the add event handlers to HTML elements so that we can do what we want when the user does something to the element.